import React, { useEffect, useState, useRef } from 'react'
import { useUnmount } from '../hooks/useUnmount'

const Child1 = (props) => {
  const [count,setCount] = useState(0)
  const timer = useRef(null)


  const start = () => {
    timer.current = setInterval(() => {
      setCount(prev => prev + 1)
      console.log('定时器')
    },1000)
  }

  useUnmount(() => {
    clearInterval(timer.current)
  })

  return (
    <div className='box'>
      <button onClick={start}>开始</button>
      <h2>Child1</h2>
      <p>{props.title}</p>
    </div>
  )
}

export default Child1